$(function() {
	// 用户名
	var oUser = $('#user_name')
	// 密码
	var oPwd = $('#pwd')
	// 确认密码
	var oCpwd = $('#cpwd')
	// 邮箱
	var oEmail = $('#email')
	// 是否同意
	var oCheck = $('#allow')
	// 表单
	var oForm = $('form')

	//用户名验证：(数字字母或下划线6到20位)
	var reUser = /^\w{6,20}$/;

	//邮箱验证：        
	var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

	//密码验证：
	var rePass = /^[\w!@#$%^&*]{6,20}$/;

	// 如果表单校验成功会返回true，校验失败返回false
	// 默认情况下，表示校验失败
	var cUser = false
	var cPwd = false
	var cCpwd = false
	var cEmail = false
	// 默认情况下，都必须选中,注意只有检查框才为true，其他为false
	var cCheck = true

	// 失去焦点校验
	oUser.blur(function() {
		var tVal = $(this).val()
		// 当失去焦点的时候，找到同济的兄弟span标签
		var oSpan = $(this).siblings('span')
		// 判断用户名是否为空
		if(tVal == '') {
			oSpan.show().html('请输入用户名')
			// 说明用户名校验失败
			cUser = false
			return
		}

		// 语法：规则.test(表示值)
		if(reUser.test(tVal)) {
			cUser = true
			// 表示匹配成功,成功之后，隐藏span标签
			oSpan.hide()
		} else {
			cUser = false
			// 匹配不成功
			oSpan.show().html('请输入数字字母或下划线6到20位')
		}

	})
	// 密码校验
	oPwd.blur(function() {
		// 拿到密码的内容
		var tVal = $(this).val()
		// 拿到提示信息
		var oSpan = $(this).siblings('span')

		if(tVal == '') {
			oSpan.show().html('请输入密码')
			cPwd = false
			return
		}

		// 注意：如果先输入确认密码，在输入密码，就会出现bug，所以还得判断确认密码是否有值
		if(oCpwd != '') {
			// 如果确认密码没有值，就不需要校验密码和确认密码是否有值
			// 如果确认密码有值，就必须校验两个密码是否一致

			if(tVal != oCpwd.val()) {

				cCpwd = false
				//如果不一致给用户一个友好提示
				oCpwd.siblings('span').show().html('两次密码不一致')

			} else {
				cCheck = true
				oCpwd.siblings('span').hide()
			}

		}

		// 校验密码，是否输入6-20位
		if(rePass.test(tVal)) {

			oSpan.hide()
			cPwd = true
		} else {
			oSpan.show().html('请输入密码6-20位')
			cPwd = false
		}

	})

	// 确认密码失去焦点
	oCpwd.blur(function() {

		var tVal = $(this).val()
		var oSpan = $(this).siblings('span')

		if(tVal == '') {

			oSpan.show().html('请输入确认密码')
			cCpwd = false
			return
		}

		// 注意
		// 因为确认密码必须和密码保持一致，所以只需要跟密码比较就可以
		if(tVal == oPwd.val()) {
			// 说明两个值保持一致
			oSpan.hide()
			cCpwd = true
		} else {
			cCpwd = false
			oSpan.show().html('两次密码不一致')
		}
		
		

	})

	oEmail.blur(function() {
		
		var tVal = $(this).val()
		var oSpan = $(this).siblings('span')

		if(tVal == '') {
			cEmail = false
			oSpan.show().html('请输入邮箱')
			return
		}

		if(reMail.test(tVal)) {

			oSpan.hide()
			cEmail = true

		} else {
			cEmail = false
			oSpan.show().html('请输入正确的邮箱')
		}

	})

	// 是否同意协议，这个地方需要注意，不是失去焦点事件，是点击事件
	oCheck.click(function() {
		var oSpan = $(this).siblings('span')
		// $(this).is(':checked'):专门用来判断单选框或者复选框，是否被选中
		if($(this).is(':checked')) {
			oSpan.hide()
			cCheck = true
		} else {
			oSpan.show().html('请同意商城协议')
			cCheck = false
		}
	})
	// 表单提交
	oForm.submit(function() {
		if(cUser && cPwd && cCpwd && cEmail && cCheck) {
			// 如果为true表示表单校验成功，可以提交到服务器
			return true
		} else {
			alert('请按照规则填写表单')
			// 如果false表示表单校验失败，不允许提交
			return false
		}
	})

})